<template>
	<div :class="class1 ? 'class1 header-bar-center' : 'header-bar-center'">
		<ul class="bar-bilibili">
			<li class="left-bili">
				<a href="#">
					<img src="./images/Snipaste_2022-04-15_17-24-43.png" alt="bilibili" />
					<div class="left-shouye">
						<span class="left-one">首页</span>

						<span class="iconfont icon-xiangxia"></span>
					</div>
				</a>
			</li>
			<li>
				<a href="#">番剧</a>
			</li>
			<li>
				<a href="#">直播</a>
			</li>
			<li>
				<a href="#">游戏中心</a>
			</li>
			<li>
				<a href="#">会员购</a>
			</li>
			<li>
				<a href="#">漫画</a>
			</li>
			<li>
				<a href="#">赛事</a>
			</li>
		</ul>
		<div class="bar-search">
			<div class="search-center">
				<form class="search-form">
					<input
						class="search-box"
						type="text"
						placeholder="智商天花板，亦有差距"
					/>
					<span class="iconfont icon-Magnifier"></span>
				</form>
			</div>
		</div>
		<ul class="bar-user">
			<li class="user-img v-popover-wrap" @click="loginHandler">
				<div class="img-info">
					<!-- <img
						src="./images/ab7e62e6341b5d94d46deb7a37fb16c15e1c57e8.jpg@240w_240h_1c_1s.webp"
							class="imger"
							alt="用户头像"
						/> -->
				</div>
			</li>
			<li class="v-popover-wrap">
				<span class="iconfont icon-huiyuan"></span>
				<span>大会员</span>
			</li>
			<li class="v-popover-wrap">
				<span class="iconfont icon-xiaoxi1"></span>
				<span>消息</span>
			</li>
			<li class="v-popover-wrap">
				<span class="iconfont icon-dongtai"></span>
				<span>动态</span>
			</li>
			<li class="v-popover-wrap">
				<span class="iconfont icon-shoucang"></span>
				<span>收藏</span>
			</li>
			<li class="v-popover-wrap">
				<span class="iconfont icon-lishi"></span>
				<span>历史</span>
			</li>
			<li class="v-popover-wrap">
				<span class="iconfont icon-dengpao"></span>
				<span>创作中心</span>
			</li>
			<li class="v-popover-wrap">
				<div class="pushWord">
					<span class="iconfont icon-shangchuan1"></span>
					<span>投稿</span>
				</div>
			</li>
		</ul>
	</div>
</template>

<script>
export default {
	name: "HeaderNav",
	props: {
		class1: {
			type: String,
			required: true,
		},
	},
};
</script>

<style lang="less" scoped>
.header-bar-center {
	margin: 0 auto;
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 0 24px 0 24px;
	opacity: 100%;
	width: 100%;
	height: 64px;
	box-sizing: border-box;
	.bar-bilibili {
		list-style-type: none;
		padding: 0;
		display: flex;
		align-items: center;
		flex-shrink: 0;
		li {
			position: relative;
			a {
				display: flex;
				align-items: center;
				justify-content: space-between;
				height: 56px;
				text-decoration: none;
				color: #18191c;
				font-size: 13px;
				margin-right: 10px;
			}
		}
		.left-bili {
			display: flex;
			align-items: center;
			justify-content: space-between;
			height: 56px;
			img {
				width: 60px;
				margin-right: 10px;
			}
			.left-shouye {
				display: flex;
				align-items: center;
				text-align: center;
				font-size: 14px;
				line-height: 20px;
				cursor: pointer;
				.left-one {
					display: inline-block;
					margin-right: 5px;
				}
				.icon-xiangxia {
					font-size: 5px;
				}
			}
		}
	}
	.bar-search {
		margin: 0 10px;
		flex: 1 auto;
		height: 38px;

		.search-center {
			position: relative;
			margin: 0 auto;
			.search-form {
				display: flex;
				align-items: center;
				padding: 0 48px 0 4px;
				position: relative;
				z-index: 1;
				overflow: hidden;
				line-height: 38px;
				// border: 1px solid #eae9eb;
				height: 40px;
				background-color: #eae9eb;
				opacity: 0.9;
				transition: background-color 0.3s;
				border-radius: 5px;
				// border: 1px solid var(--line_regular);
				border-bottom: none;
				// background: var(--bg1);
				&:hover {
					background-color: #fff;
				}
				.search-box {
					color: #61666d;
					// background-color: #eae9eb;
					background-color: transparent;
					flex: 1;
					overflow: hidden;
					padding-left: 8px;
					box-shadow: none;
					font-size: 14px;
					line-height: 25px;
					border: none;

					&:focus {
						border-radius: 5px;
						outline: none;
						background-color: #eae6e7;
					}
				}
				.icon-Magnifier {
					// border: 1px solid #000;
					position: absolute;
					top: 3px;
					right: 7px;
					display: flex;
					align-items: center;
					justify-content: center;
					margin: 0;
					padding: 0;
					width: 32px;
					height: 32px;
					border: none;
					border-radius: 6px;
					color: #29272b;
					line-height: 32px;
					cursor: pointer;
					transition: background-color 0.3s;
					&:hover {
						background-color: #eae9eb;
					}
				}
			}
		}
	}
	.bar-user {
		list-style-type: none;
		display: flex;
		align-items: center;
		margin-right: 10px;
		padding: 0;
		.v-popover-wrap {
			display: flex;
			flex-direction: column;
			align-items: center;
			color: #18191c;
			font-size: 14px;
			margin: 0 5px;
		}
		.user-img {
			position: relative;
			box-sizing: content-box;
			// padding-right: 10px;
			width: 50px;
			height: 50px;
			cursor: pointer;
			.img-info {
				width: 38px;
				height: 38px;
				box-sizing: content-box;
				border: 2px solid #fff;
				display: block;
				position: absolute;
				right: 0;
				background-image: url("./images/zhu-1.png");
				background-size: cover;
				border-radius: 50%;
				margin: 0;
				padding: 0;
			}
		}
		.pushWord {
			margin-left: 8px;
			display: flex;
			align-items: center;
			justify-content: center;
			// margin-left: 16px;
			width: 90px;
			height: 34px;
			border-radius: 8px;
			background: #fb7299;
			color: #fff;
			text-align: center;
			font-size: 14px;
			line-height: 20px;
			cursor: pointer;
			transition: background-color 0.3s;
			font-weight: 500;
		}
	}
}
.class1 {
	position: fixed;
	top: 0;
	background-color: white;
	z-index: 9999;
}
</style>
